<template>
  <div class="no-ware">
    <MainHeader
      @inputChange="inputChange"
      placeholder="搜索商品名称……"
      title="未入库商品"
    ></MainHeader>
    <el-card shadow="always">
      <div class="control">
        <div class="right">
          <el-button @click="showDialog" size="small " type="primary"
            >添加商品</el-button
          >
        </div>
      </div>
      <noWarehousingList></noWarehousingList>
    </el-card>

    <AddShopCard ref="AddShopCard"></AddShopCard>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import { MainHeader } from '@/components/main-header/index'
import noWarehousingList from './cpns/no-warehousing-list.vue'
import AddShopCard from './cpns/AddShopCard.vue'

export default defineComponent({
  components: { MainHeader, noWarehousingList, AddShopCard },
  setup() {
    const AddShopCard = ref()
    onMounted(() => {
      return AddShopCard
    })
    const showDialog = () => {
      AddShopCard.value.changeVisibility(true)
    }
    return { showDialog, AddShopCard }
  },
})
</script>

<style scoped lang="less">
.no-ware {
  .el-card {
    min-height: 80vh;
  }

  .control {
    display: flex;
    justify-content: flex-end;

    .right {
      display: flex;
      align-items: center;

      .total-number {
        margin-right: 0.6rem;
        color: #888;
        font-size: 0.14rem;
      }
    }
  }
}
</style>
